(function () {
  // 步骤3：创建echarts实例

  ffn();
  function ffn() {
    let myChart = echarts.init(document.querySelector(".box-m1-m2-m3"));

    // 步骤4：定义配置（指定图表的配置项和数据）
    let option = {
      title: {
        show: true,
        text: "标题样式",
        textStyle: {
          color: "purple",
          fontSize: 18,
        },
      },
      // 系列
      series: [
        {
          type: "pie",
          data: [
            {
              value: 30,
              itemStyle: {
                color: "#333843",
              },
            },
            {
              value: 90,
              itemStyle: {
                color: "#6abaf2",
              },
            },
          ],
          // 饼图图形上的文本标签，
          label: {
            show: false,
          },
          // 圆半径
          radius: [37, 43],
          // 起始角度，支持范围[0, 360]。
          startAngle: 200,
        },
      ],
      // 加水印
      graphic: [
        {
          type: "text",
          top: "45%",
          left: "25%",
          style: {
            text: "132",
            fill: "#fff",
            color: "#fff",
            fontSize: 24,
            fontWeight: "bold",
          },
        },
        {
          type: "text",
          top: "60%",
          left: "25.5%",
          style: {
            text: "占比54%",
            fill: "#A6A8B6",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
      ],
    };

    // 步骤5：使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  }

  //2
  let myChart = echarts.init(document.querySelector(".box-m1-m2-m2"));

  // 步骤4：定义配置（指定图表的配置项和数据）
  let option = {
    title: {
      show: true,
      text: "标题样式",
      textStyle: {
        color: "green",
        fontSize: 18,
      },
    },
    // 系列
    series: [
      {
        type: "pie",
        data: [
          {
            value: 30,
            itemStyle: {
              color: "#333843",
            },
          },
          {
            value: 90,
            itemStyle: {
              color: "#6abaf2",
            },
          },
        ],
        // 饼图图形上的文本标签，
        label: {
          show: false,
        },
        // 圆半径
        radius: [37, 43],
        // 起始角度，支持范围[0, 360]。
        startAngle: 200,
      },
    ],
    // 加水印
    graphic: [
      {
        type: "text",
        top: "45%",
        left: "25%",
        style: {
          text: "332",
          fill: "#fff",
          color: "#fff",
          fontSize: 24,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        top: "60%",
        left: "25.5%",
        style: {
          text: "占比54%",
          fill: "#A6A8B6",
          fontSize: 12,
          fontWeight: "normal",
        },
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  //3
  fffn();
  function fffn() {
    let myChart = echarts.init(document.querySelector(".box-m1-m2-m1"));

    // 步骤4：定义配置（指定图表的配置项和数据）
    let option = {
      title: {
        show: true,
        text: "标题样式",
        textStyle: {
          color: "pink",
          fontSize: 18,
        },
      },
      // 系列
      series: [
        {
          type: "pie",
          data: [
            {
              value: 30,
              itemStyle: {
                color: "#333843",
              },
            },
            {
              value: 90,
              itemStyle: {
                color: "#6abaf2",
              },
            },
          ],
          // 饼图图形上的文本标签，
          label: {
            show: false,
          },
          // 圆半径
          radius: [37, 43],
          // 起始角度，支持范围[0, 360]。
          startAngle: 200,
        },
      ],
      // 加水印
      graphic: [
        {
          type: "text",
          top: "45%",
          left: "25%",
          style: {
            text: "232",
            fill: "#fff",
            color: "#fff",
            fontSize: 24,
            fontWeight: "bold",
          },
        },
        {
          type: "text",
          top: "60%",
          left: "25.5%",
          style: {
            text: "占比54%",
            fill: "#A6A8B6",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
      ],
    };

    // 步骤5：使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  }
})();
